<template>
<div>
    <div class="head">
        <span class="block box" style="height: 321.591px;overflow:scroll;width: 60%;">
            <h3 style="margin-top:0">申请信息</h3>
            <h4 v-if="applys.length == 0">暂无申请</h4>
            <el-timeline v-else> 
                <el-timeline-item 
                v-for="apply in applys" 
                :key="apply.id" 
                :timestamp="apply.date" 
                placement="top" 
                >
                <el-card>
                    <div>
                        <p>{{apply.type}}</p>
                        <p>{{apply.name}} 提交于 {{apply.date}} {{apply.time}}</p>
                        <p>寝室：{{apply.dorid}}</p>
                    </div>
                    <div style="padding:5%">
                        <el-button v-if="apply.hmid == null" type="success" @click="open(apply)" plain>受理</el-button>
                        <el-button v-else-if="apply.hmid == hmid" type="danger" disabled plain>被我受理</el-button>
                        <el-button v-else type="danger" disabled plain>已被受理</el-button>
                        <el-popover
                        placement="top"
                        width="160"
                        trigger="focus"
                        style="margin-left:10px">
                            <p>详情：{{apply.infor}}</p>
                            <p>电话：{{apply.phone}}</p>
                            <p>邮箱：{{apply.email}}</p>
                        <el-button slot="reference">详情</el-button>
                        </el-popover>
                    </div>
                </el-card>
                </el-timeline-item>
            </el-timeline>
        </span>
        <el-calendar class="box" v-model="value">
        </el-calendar>
    </div>
    <div class="echarts" style="width:100%">
        <div class="box" id="manAndwoman" style="width:28%;height:350px"></div>
        <div class="box" id="isHome" style="width:28%;height:350px"></div>
        <div class="box" id="stayin" style="width:28%;height:350px"></div>
    </div>
</div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name:'HomeHM',
    data() {
        return {
            value: new Date(),
            applys:[],
            hmid:JSON.parse(localStorage.getItem('homemaster')).hmid
        } 
    },
    methods: {
        open(apply) {
            let _this = this
            this.$confirm('确定受理吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                _this.accept(apply)
            }).catch(()=>{
                
            })
        },
        getDorNum(){
            const _this = this
            return new Promise((resolve,reject)=>{
                axios.get(`http://localhost:8081/dormitory/countAllSpace?sex=${JSON.parse(localStorage.getItem('homemaster')).sex}`).then(res=>{
                    resolve(res.data)
                }).catch(err=>{
                    reject(err)
                })
            })
        },
        getExitStudents(){
            const _this = this
            return new Promise((resolve,reject)=>{
                axios.get(`http://localhost:8081/student/getStudent2?sex=${JSON.parse(localStorage.getItem('homemaster')).sex}`).then(res=>{
                    resolve(res.data)
                }).catch(err=>{
                    reject(err)
                })
            })
        },
        accept(apply){
            let _this = this
            let hmid = JSON.parse(localStorage.getItem('homemaster')).hmid
            apply.hmid = hmid
            axios.get(`http://localhost:8081/apply/accept/${apply.id}/${hmid}`).then(function(){
                alert('受理成功')
            }).catch(function(){
                alert('受理失败')
            })
        },
        getApplys(){
            let _this = this
            axios.get(`http://localhost:8081/apply/getUsefulApplyBySex/${JSON.parse(localStorage.getItem('homemaster')).sex}`).then(function(resp){
                _this.applys = resp.data
            })
        },
        initEchartsMW(){
            let _this = this
            axios.get('http://localhost:8081/student/getEchartsMWdata').then(function(resp){
                _this.EchartsMW(resp.data)
            })
        },
        EchartsMW(data){
            let chartDom = document.getElementById('manAndwoman');
            let myChart = echarts.init(chartDom);
            let option;

            option = {
            title: {
                text: '男女人数比',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            color:['#15b8ee','#8f1a28'],
            series: [
                {
                type: 'pie',
                radius: '50%',
                data:data,
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
            };
            option && myChart.setOption(option);
        },
        initEchartsIH(){
            let _this = this
            axios.get(`http://localhost:8081/student/getEchartsINdata/${JSON.parse(localStorage.getItem('homemaster')).sex}`).then(function(resp){
                _this.EchartsIH(resp.data)
            })
        },
        EchartsIH(data){
            let chartDom = document.getElementById('isHome');
            let myChart = echarts.init(chartDom);
            let option;

            option = {
            title: {
                text: '宿舍到寝情况',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            color:['#3fc113','#8f1a28'],
            series: [
                {
                type: 'pie',
                radius: '50%',
                data:data,
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
            };
            option && myChart.setOption(option);
        },
        async initEchartsSI(){
            let _this = this
            let dor = await this.getDorNum()
            let list = await this.getExitStudents()
            let less = dor.length*6-list.length
            let res = [{name:'剩余空位',value:less},{name:'已入住人数',value:list.length}]
            _this.EchartsSI(res)
        },
        EchartsSI(data){
            let chartDom = document.getElementById('stayin');
            let myChart = echarts.init(chartDom);
            let option;

            option = {
            title: {
                text: '房间人数:空位',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            color:['#3fc113','#571566'],
            series: [
                {
                type: 'pie',
                radius: '50%',
                data:data,
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
            };
            option && myChart.setOption(option);
        }
    },
    mounted(){
        this.initEchartsMW();
        this.initEchartsIH();
        this.initEchartsSI();
        this.getApplys();
    }
}
</script>

<style scoped>
.el-calendar {
    font-size: 14px;
    width: 30%;
}
::v-deep .next {
      border: none;
    }
::v-deep td {
      border: none;
    }
::v-deep .el-calendar-day {
      height: 30px;
      text-align: center;   
      border: none;
    }
.box{
    margin-top: 10px;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.5);
}
.head{
    display: flex;
    justify-content: space-between;
}
.block{
    width: 50%;
}
.echarts{
    display: flex;
    justify-content: space-between;
}
::v-deep .el-card__body{
    width: 80%;
    display: flex; 
    justify-content: space-between;
}
</style>